<!DOCTYPE html>
<!-- Template borrowed from Arun Chaganty -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <style>
    .example-header {
      font-size: 150%;
      font-weight: bold;
    }
    span.answer {
        background-color: cyan;
    }
    </style>
  </head>
  <body>
    <div class="container">
    
<div class="page-header">
<h1>Fix grammar and style of English sentences</h1>
</div>

<div class="col-md-12">

<div class="panel panel-default panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Instructions</h3>
  </div>
  <div class="panel-body">
  <p>
  In each part of this task, you will be shown a sentence, for example:
    <blockquote> 
      <span class='answer'>Chicago</span> hotel did the Vikings stay at.
    </blockquote> 
    We would like you to fix the sentence 
    so that it is grammatical and sounds natural 
    (like something a fluent English speaker would say). 
    For example, a good response for the above sentence above would be:
    <blockquote>
      The Vikings stayed at a hotel in Chicago.
    </blockquote>
    You may make any changes that are needed to fix the sentence.
    When possible, the following types of changes are preferred:
    <ul>
      <li> Rearrange words or phrases.
      <li> Delete, add, or change words that are not content words
        (e.g. words like "a", "did", to", etc.).
      <li> Change the form of a word (e.g. changing "stay" to "stayed").
      <li> Replace words that are <span class='answer'>highlighted</span>
      with another word or phrase that fits better.
      These are words we have already identified as candidates to be changed.
    </ul>
    Only make changes that are necessary to fix the sentence.
  </p>
  <p>
    Some further guidelines:
    <ul>
      <li> All sentences should be <b>statements, not questions</b>.
        If the given sentence looks like a question, please convert it to a statement.
      <li> If you cannot understand what the sentence is trying to say,
        just write your own sentence using as many words and phrases
        from the original sentence as possible.
      <li> It is fine if the sentences are false--we are only concerned with whether they sound like fluent English.
    </ul>
  </p>

  <p>
    Here are some more examples: <br/>
    <span class="example-header">Example 1</span><br>
    Input:  
    <b><span class='answer'>Jeff Dean</span> was the 
      NBA Administrator in late 2013.</b>
    <br>
    Is this sentence natural and grammatical? <b>Yes</b><br>
    In this case, just leave the text field blank.
    <br>
    <br>

    <span class="example-header">Example 2</span><br>
    Input: 
    <b>The Leonard's did invade at Tremadog Tampa in the year of <span class='answer'>1144</span>.</b>
    <br>
    Is this sentence natural and grammatical? <b>No</b><br>
    Fix the errors in the sentence:
    <b>Leonard's army invaded Tremadog Tampa in 1144.</b> <br>
    <br>

    <span class="example-header">Example 3</span><br>
    Input:
    <b>His mother made the bargain of <span class='answer'>hamster</span> with him if Tadakatsu recovered.</b>
    <br>
    Is this sentence natural and grammatical? <b>No</b><br>
    Fix the errors in the sentence:
    <b>If Tadakatsu recovered, his mother agreed to make a 
      good bargain with him.</b><br>
    <br>
  <p>
  <b>Estimated time for task:</b> 3 minutes.
  </p>
  <p>
  <b>Note about evaluation:</b> 
  Your yes/no responses will be compared to the responses of other workers on the same HIT.
  The new sentences you write will be manually reviewed before your work is approved.
  </p>
</div>
</div>

<div class="panel panel-default panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Task</h3>
  </div>

  <input type="hidden" name="id" id="id" value="${id}" />
  <input type="hidden" name="qids" id="qids" value="${qids}" />
  <input type="hidden" name="sents" id="sents" value="${sents}" />
  <input type="hidden" name="responses" id="responses" value="" />
  <input type="hidden" name="is-good" id="is-good" value="" />

  <div id="tasklist">
  <div id="template" class="panel panel-default hidden">
    <div class="panel-heading">
      <h4 class="panel-title">Part @@j@@</h4>
    </div>
    <p>Consider the following sentence:</p>

    <blockquote>
      <i>@@sent@@</i>
    </blockquote>

    <div class="form-horizontal">
      <div class="form-group">
        <div class="row">
          <label for="is-good-@@i@@" class="col-sm-6 control-label">
            Is this sentence natural and grammatical?
          </label>
          <input type="radio" name="is-good-@@i@@" value="yes"> Yes
          <input type="radio" name="is-good-@@i@@" value="no"> No<br>
        </div>
        <div class="row">
          <label for="response-@@i@@" class="col-sm-6 control-label">
            If you answered "no", please provide a fixed version of the sentence:
          </label>
        </div>
        <div class="col-sm-12">
          <input type="text" class="form-control" id="response-@@i@@"
                 placeholder="Fix any errors in the above sentence.">
        </div>
      </div>
    </div>
  </div>

  </div>

  <div class="alert alert-danger hidden" id="errorBox">
    Some responses were not filled.
  </div>
  <div class="alert alert-success hidden" id="successBox">
    Thank you for your input!
  </div>


<input name="submit" class="btn btn-primary" type="submit" id="submitButton" value="Submit" />

    <script type="text/javascript">

function getSents() {
  return $("#sents").attr("value").split("\t");
}

  // Aggregate output.
function validateInputs() {
  // Check that the input has been inserted.
  var sents = getSents();
  var success = true;
  var isGoodStr = "";
  var valueStr = "";
  for (var i = 0; i < sents.length; i++) {
    var isGood = $("input[name='is-good-" + i + "']:checked").val();
    if (isGood) {
      if (isGoodStr.length > 0) {
        isGoodStr += "\t";
      }
      isGoodStr += isGood
    } else {
      success = false;
    }
    var response = $("#response-"+i).val();
    if (valueStr.length > 0) {
      valueStr += "\t";
    }
    if(response.length > 0) {
      valueStr += response;
    } else if (isGood == "yes") {
      valueStr += "N/A";
    } else {
      success = false;
    }
  }
  $('#is-good').attr("value", isGoodStr);
  $('#responses').attr("value", valueStr);

  if (success) {
    $("#errorBox").addClass("hidden");
    $("#successBox").removeClass("hidden");
  } else {
    $("#errorBox").removeClass("hidden");
    $("#successBox").addClass("hidden");
  }
  return success;
}

// Create a copy of the template class and replace key variables.
function setSent(i, s) {
  var task = $("#template").clone();
  // Set id
  task.attr("id", "task-"+i);
  // Replace @@i@@ and @@sent@@.
  task.html(task.html()
      .replace(/@@i@@/g, i)
      .replace(/@@j@@/g, i+1)
      .replace(/@@sent@@/, s));
  // Make visible.
  task.removeClass("hidden");
  // Add to the tasklist
  $("#tasklist").append(task);
}

$(document).ready(function() {
  // Split prompts.
  var sents = getSents();
  // Set HTML for each task.
  for (var i = 0; i < sents.length; i++) {
    setSent(i, sents[i]);
  }

  // Capture the submit button.
  $('#submitButton').click(validateInputs);
});
    </script>

</div>

</div>


    </div>
  </body>
</html>
